<template>
    <div class="identity">
        <van-nav-bar title="身份认证" left-arrow @click-left="goBack"></van-nav-bar>
        <div class="content">
            <div class="tips-msg">
                <div class="warn-icon">
                    <i class="icon iconfont icon-jinggao"></i>
                </div>
                <div class="warn-content">
                    <p class="warn-title">未认证</p>
                    <p class="warn-detail">为了保证您在平台交易的资金安全，请先完成身份认证</p>
                </div>
            </div>
            <div class="verify-info">
                <div class="notice">依据国际惯例KYC和《反洗钱法》的要求，平台需要验证您的身份</div>
                <div class="verify-content">
                    <div class="country">
                        <div class="id-info cot" @click="showDiv">
                            <span>*</span>
                            <label for="">国籍</label>
                            <input type="text" v-model="countrys" placeholder="请选择国家" ref="countrys" disabled value="">
                            <img class="cott" src="../../../assets/images/icon-arrow-left.png" alt="">
                        </div>
                        <van-popup v-model="showCountry" psosition="botton" :overlay="true">
                            <van-picker show-toolbar title="请选择国家" :columns="columns" @cancel="onCancel" @confirm="onConfirm"></van-picker>
                        </van-popup>
                        <van-cell-group>
                            <van-field value="" v-model="nameOne" placeholder="请输入真实名字" label="名" required/>
                        </van-cell-group>
                        <van-cell-group>
                            <van-field value="" v-model="nameTwo" placeholder="请输入真实姓氏" label="姓" required/>
                        </van-cell-group>

                        
                        <van-cell-group @click="showID">
                            <van-field value="" label="证件类型" ref="myCard" :placeholder="myCard" required disabled right-icon="arrow-down"/>
                        </van-cell-group>
                        <van-popup v-model="showIdType" psosition="botton" :overlay="true">
                            <van-picker show-toolbar title="请选择证件类型" :columns="idtype"  @cancel="onCancel" @confirm="onConfirmTwo" ></van-picker>
                        </van-popup>


                        <van-cell-group>
                            <van-field value="" v-model="myNum" label="证件号码" placeholder="请输入证件号" required/>
                        </van-cell-group>
                        <van-cell-group class="photo" v-show="flagPic">
                            <van-field class="ipt" value="" label="证件照片" required disabled/>
                            <p class="detail">请添加本人清晰的证件照片（不超过10M/JPEG或PNG）</p>
                        </van-cell-group>
                        <div class="uploaderFiels" v-show="flagPic">
                            <div class="fiels">
                                <div class="file-style">
                                    <img class="head-img" src="../../../assets/images/idcard-front.png" ref="idcardFront"/>
                                    <input type="file" name="files" id="fileOne" accept="image/jpg,image/png,image/jpeg" @change="changeOne">
                                </div>
                                <p class="text">证件正面照</p>
                            </div>
                            <div class="fiels">
                                <div class="file-style">
                                    <img class="head-img" src="../../../assets/images/idcard-behind.png" ref="idcardBehind"/>
                                    <input type="file" name="files" id="fileTwo" accept="image/jpg,image/png,image/jpeg" @change="changeTwo">
                                </div>
                                <p class="text">证件反面照</p>
                            </div>
                            <div class="fiels">
                                <div class="file-style">
                                    <img class="head-img" src="../../../assets/images/idcard-hand.png" ref="idcardHand"/>
                                    <input type="file" name="files" id="fileThree" accept="image/jpg,image/png,image/jpeg" @change="changeThree">
                                </div>
                                <p class="text">本人手持证件照</p>
                            </div>
                        </div>
                        <van-cell-group>
                            <van-field value="" v-model="myBirth" label="出生地址" placeholder="YY-MM-DD" required/>
                        </van-cell-group>
                        <van-cell-group>
                            <van-field value="" v-model="myPhone" label="联系方式" placeholder="" required/>
                        </van-cell-group>
                        <div class="tips">友情提示：请务必保证所有填写资料准确无误，资料一旦提交，不可修改。</div>
                        <div class="submit">
                            <button type="submit" class="submit-btn" @click="submit">提交</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Vue from "vue"
import axios from "axios"
import qs from 'qs'
import {
    countryList,
    batchUploadFile,
    uploadFile,
    idCard
} from "../../../axios/api.js"
import {
    NavBar,
    Cell,
    CellGroup,
    Field,
    Popup,
    Picker,
    Toast  
} from "vant"
export default {
    components: {
        [NavBar.name]: NavBar,
        [Cell.name]: Cell,
        [CellGroup.name]: CellGroup,
        [Field.name]: Field,
        [Popup.name]: Popup,
        [Picker.name]: Picker,
         [Toast .name]: Toast ,
    },
    data() {
        return {
            showCountry: false,
            showIdType: false,
            columns:[],
            idtype: ["身份证","护照","驾驶证"],
            token: "",
            countrys: "",
            nameOne:"",
            nameTwo:"",
            myNum:"",
            myBirth:"",
            myCard:"请输入证件类型",
            myCardId:"",
            myCountry:"请选择国家",
            countrysId:'',
            myPhone:'',
            picList:[],
            flagPic:false
           
        }
    },
     created() {
        //国籍
        countryList().then(res => {
            const list = res.data.data;
            console.log(list)
            for (const i in list) {
                const items = list[i];
                const countryChineseName = items.countryChineseName;
                this.columns.push(items.countryChineseName);
                console.log(this.columns)
            }
        })
    },
    watch:{
        myCard(){
            console.log(this.myCard,888)
            if(this.myCard != "请输入证件类型"){
                this.flagPic = true
            }else{
                this.flagPic = false
            }
        }
    },
    methods: {
        //返回上一页
        goBack() {
            this.$router.go(-1);
        },
        // 控制国家列表的显示隐藏
        showDiv(e) {
            console.log(e,888)
            this.showCountry = true;
        },
        // 控制证件类型的显示隐藏
        showID() {
            this.showIdType = true;
        },
        onCancel(picker) {
            this.showCountry = false;//表示点击取消的时候,组件隐藏掉,关闭
            this.showIdType = false;
        },
        onConfirm(value) {
            this.showCountry = false;
            this.showIdType = false;
            this.$refs.countrys.value = value;
            this.countrys = value;
            for(var i = 0; i<this.columns.length;i++){
                if(this.columns[i] == this.countrys){
                    console.log(i)
                    this.countrysId = i;
                    console.log(this.countrysId)
                }
            }
            
            console.log(this.$refs.countrys.value)
        },

        onConfirmTwo(value) {
            this.showCountry = false;
            this.showIdType = false;
            this.$refs.myCard.value = value;
            this.myCard = value;
            console.log(this.myCard)
            for(var i = 0; i<this.idtype.length;i++){
                if(this.idtype[i] == this.myCard){
                    console.log(i)
                    this.myCardId = i;
                    console.log(this.myCardId)
                }
            }
            
            console.log(this.$refs.myCard.value)
        },



        //选择图片后执行 上传正面
        changeOne(event) {
            let UpFiles = new FormData();
            UpFiles.append("file",$('#fileOne')[0].files[0]);
            UpFiles.append("type",this.myCardId);
            console.log(UpFiles)
            console.log($('#fileOne')[0].files[0])
            uploadFile(UpFiles).then(res => {
                console.log(res.data.data)
                this.picList.push(res.data.data)
                console.log(this.picList)
                //将原图片显示为选择的图片
                this.$refs.idcardFront.src = res.data.data;
                // this.$refs.idcardBehind.src = res.data.data;
                // this.$refs.idcardHand.src = res.data.data;
            })
        },
        changeTwo(event) {
            let UpFiles = new FormData();
            UpFiles.append("file",$('#fileTwo')[0].files[0]);
            UpFiles.append("type",this.myCardId);
            console.log(UpFiles)
            console.log($('#fileTwo')[0].files[0])
            uploadFile(UpFiles).then(res => {
                console.log(res.data.data)
                this.picList.push(res.data.data)
                console.log(this.picList)
                //将原图片显示为选择的图片
                // this.$refs.idcardFront.src = res.data.data;
                 this.$refs.idcardBehind.src = res.data.data;
                // this.$refs.idcardHand.src = res.data.data;
            })
        },
        changeThree(event) {
            let UpFiles = new FormData();
            UpFiles.append("file",$('#fileThree')[0].files[0]);
            UpFiles.append("type",this.myCardId);
            console.log(UpFiles)
            console.log($('#fileThree')[0].files[0])
            uploadFile(UpFiles).then(res => {
                console.log(res.data.data)
                this.picList.push(res.data.data)
                console.log(this.picList)
                //将原图片显示为选择的图片
                // this.$refs.idcardFront.src = res.data.data;
                 //this.$refs.idcardBehind.src = res.data.data;
                this.$refs.idcardHand.src = res.data.data;
            })
        },
        submit() {
            // idCard({
            //     params:{
            //         token:window.sessionStorage.getItem("token"),
            //         idCard:this.myNum,
            //         name:this.nameOne,
            //         countryId:this.countrysId,
            //         surname:this.nameTwo,
            //         credentialsType:this.myCardId,
            //         birthAddress:this.myBirth,
            //         contactAddress:this.myPhone,
            //         idCardImgUrl:[744]
            //     }
            // }).then(res => {
            //     console.log(res)
            // })



            $.ajax({
			type: "post",
			cache: false,
			traditional: true,
			dataType: "json",
			url: "http://172.16.0.9/endless/idCard/add",
			xhrFields: {
				withCredentials: true
			},
			crossDomain: true,
			data: {
				token:window.sessionStorage.getItem("token"),
                idCard:this.myNum,
                name:this.nameOne,
                countryId:this.countrysId,
                surname:this.nameTwo,
                credentialsType:this.myCardId,
                birthAddress:this.myBirth,
                contactAddress:this.myPhone,
                idCardImgUrl:this.picList
			},
			success: function(data) {
                console.log(data);
                if(data.code == "200"){
                   Toast("修改成功！");   
                }else{
                    Toast(data.msg);
                }
            }
		});
        }
    }
}
</script>
<style lang="less" scoped>
@import "../../../assets/less/variable.less";
.cot{
    position: relative;
    .cott{
        position: absolute;
        right: 0;
        top: 15px;
    }
}
.van-cell
.van-cell__left-icon {
    font-size: 10px;
    color: @theme_color;
}
.van-cell__title,.van-cell__value {
    flex: auto;
    text-align: left;
}
.van-cell--required::before {
    left: 15px;
}
/deep/ .van-field__label {
    text-align: left;
    margin-left: 10px;
}
.van-cell:not(:last-child)::after {
    border-bottom: 0;
}
.van-cell {
    text-align: left;
}
.van-popup {
    position: fixed;
    top: 83.4%;
    width: 100%;
}
.identity {
    background: #fff;
    .content {
        .tips-msg {
            display: flex;
            padding: 10px 15px;
            background: #fff7ea;
            font-size: 16px;
            color: #f44;
            .warn-icon {
                margin-right: 10px;
                line-height: 2;
                i {
                    font-size: 32px;
                }
            }
            .warn-content {
                flex: 1;
                text-align: left;
                line-height: 1.5;
                .warn-title {
                    font-weight: 700;
                }
                .warn-detail {
                    font-size: 14px;
                }
            }
        }
        .verify-info {
            .notice {
                padding: 10px 15px;
                text-align: left;
                font-size: 14px;
                color:#999;
            }
            .verify-content {
                .country {
                    .id-info {
                        text-align: left;
                        padding: 10px 15px;
                        width: 100%;
                        background-color: #fff;
                        border-bottom: 1px solid #ebedf0;
                        box-sizing: border-box;
                        line-height: 24px;
                        position: relative;
                        background-color: #fff;
                        color: #323233;
                        font-size: 14px;
                        span {
                            color: #f44;
                        }
                        input {
                            border: 0;
                            width: 62%;
                            background: #fff;
                            margin-left: 60px;
                        }
                    }
                    .icon-star {
                        font-size: 12px;
                        color: @theme_color;
                    }
                    .photo::after {
                        border-width: 0;
                    }
                    .ipt {
                        padding: 15px 15px 0 15px;
                    }
                    .detail {
                        padding: 0 15px;
                        text-align: left;
                        color: #969799;
                    }
                    .tips {
                        padding: 10px 15px;
                        text-align: left;
                        color: #969799;
                    }
                    .submit {
                        margin: .67rem 0;
                        width: 100%;
                        background-color: #fff;
                        color: #fff;
                        font-size: @base_textSize;
                        .submit-btn {
                            padding: 10px;
                            width: 90%;
                            height: 1.07rem;
                            border: 0;
                            border-radius: 3px;
                            background: #ff976a;
                            outline: none;
                        }
                    }
                    .uploaderFiels {
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        padding: 10px 15px;
                        .fiels {
                            margin: 0 30px 0 0;
                            .file-style {
                                position: relative;
                                display: inline-block;
                                width: 3.07rem;
                                height: 2.27rem;
                                overflow: hidden;
                                text-decoration: none;
                                text-indent: 0;
                                line-height: 20px;
                                img {
                                    display: block;
                                    width: 3.07rem;
                                    height: 2.27rem;
                                }
                                input {
                                    position: absolute;
                                    width: 100%;
                                    height: 100%;
                                    right: 0;
                                    top: 0;
                                    opacity: 0;
                                }
                            }
                            .text {
                                margin: 5px 0;
                                font-size: 12px;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>
